<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 
        1.定义：要用的属性不存在，要通过已有属性计算得来。
        2.原理：底层借助了Objcet.defineProperty方法提供的getter和setter。
        3.get函数什么时候执行？
            (1).初次读取时会执行一次。
            (2).当依赖的数据发生改变时会被再次调用。
        4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
        5.备注：
            (1).计算属性最终会出现在vm上，直接读取使用即可。
            (2).如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
     -->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br><br>
        名：<input type="text" v-model="lastName">  <br><br>
        <!-- 直接使用fullName即可读取到具体的值，不要写成fullName.get() -->
        全名：<span>{{ fullName }}</span>
    </div>

    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el: "#root",
            data: {
                firstName: "张",
                lastName: "三"
            },
            computed: {
                /* 计算属性的完整写法： */
                // fullName: {
                //     // 这里的底层是用Object.defineProperty
                //     // 当读取fullName属性时，get被调用，且返回值就是fullName的值
                //     get() {
                //         console.log("get被调用了");
                //         // console.log(this);  // 这里的this是vue实例vm
                //         return `${this.firstName}-${this.lastName}`
                //     },
                //     // 当修改fullName的值时，set方法就会被调用，
                //     set(value) {
                //         console.log("set被调用了");
                //         const arr = value.split("-");
                //         this.firstName = arr[0]  // 修改相应的值
                //         this.lastName = arr[1]
                //     }
                // }

                /* 简写：当确定不会修改计算属性的值时，即只有get方法没有set方法 */
                // 注意：这里的fullName和普通的函数是有区别的，fullName只是一个属性名字，而具体的函数体则是get函数，只不过省略了
                // 所以，如果要用到的话，不能写成{{ fullName() }}，而是写成{{ fullName }}
                fullName() {
                // fullName:function() {
                    console.log("get被调用了");
                    return `${this.firstName}-${this.lastName}`
                }

            }
        })
    </script>
</body>
</html>